<template>
  <a-modal
    title="添加限定词"
    :width="modalWidth()"
    :visible="visible"
    :footer="null"
    :bodyStyle="{height: modalHeight()}"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div style="margin-bottom: 12px;width: 100%">
        <span>限定类型: </span>
        <a-select
          style="width: 90%"
          :value="type"
          @change="selectChange"
          placeholder="请选择限定类型">
          <a-select-option v-for="(item,i) in typeData" :key="i" :value="item.code">{{ item.name }}
          </a-select-option>
        </a-select>
      </div>
    </a-spin>
    <a-transfer
      :target-keys="targetKeys"
      :list-style="{width:'46%',height: transferHeight()}"
      :render="item => item.title"
      :showSelectAll="false"
      @change="handleChange"
      :data-source="data"></a-transfer>
    <div style="text-align: right">
      <a-button type="primary" @click="handleResult" style="margin-right: 10px;margin-top: 22px">确定</a-button>
    </div>
  </a-modal>
</template>

<script>

import {
  qualifierAdd, qualifierSource
} from '@/api/modular/main/knowl/relation/relationManage'

import { register } from '@/utils/drag_modal'

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      targetKeys: [],
      type: undefined,
      relationId: undefined,
      typeData: [],
      data: [],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    transferHeight() {
      return (document.body.clientHeight * 0.4) + 'px'
    },
    modalWidth() {
      return document.body.clientWidth * 0.5
    },
    modalHeight() {
      return (document.body.clientHeight * 0.6) + 'px'
    },
    // 初始化方法
    index(record) {
      this.visible = true
      this.relationId = record.id
      const typeOption = this.$options
      this.typeData = typeOption.filters['dictData']('relation_type')
      this.type = this.typeData[0].code
      this.queryQualifierSource()
      register(true)
    },
    handleResult() {
      this.confirmLoading = true
      const targets = this.targetKeys
      qualifierAdd({
        relationId: this.relationId,
        type: this.type,
        targetRelationIds: targets
      })
        .then(() => {
          this.confirmLoading = false
          this.$message.info('添加成功!')
          this.$emit('qualifierReload')
          this.handleCancel()
        })
        .catch(() => {
          this.confirmLoading = false
          this.$message.error('保存失败,请重试!')
        })
    },
    selectChange(value) {
      this.type = value
      this.queryQualifierSource()
    },
    handleChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
    handleCancel() {
      register(false)
      this.targetKeys = []
      this.data = []
      this.visible = false
    },
    queryQualifierSource() {
      this.confirmLoading = true
      qualifierSource({
        relationId: this.relationId,
        type: this.type
      })
        .then((data) => {
          this.confirmLoading = false
          const source = data.source
          const target = data.target
          const list = source.concat(target)
          list.forEach((it) => {
            it.key = it.id
            it.title = it.chName
          })
          this.targetKeys = target.map((e) => {
            return e.id
          })
          this.data = list
        })
        .catch((e) => {
          this.confirmLoading = false
        })
    }
  }
}
</script>
